<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="170px" label-suffix=":" class="form-class" v-loading="loading">
            <el-form-item label="类型" prop="type">
                <el-select v-model="model.type" placeholder="全部" clearable>
                    <el-option
                        v-for="item in type_arr"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="达人ID" v-if="model.type == 2" prop="ExpertId">
                <el-input v-model.trim="model.ExpertId" placeholder="请输入达人ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="店铺" v-if="model.type == 2" prop="shop_id">
                <el-select v-model="model.shop_id" placeholder="请选择店铺" clearable size="small" style="width: 240px">
                    <el-option v-for="(dict, index) in shopList" :key="index" :label="dict.shop_name" :value="dict.shop_id" />
                </el-select>
            </el-form-item>
            <el-form-item label="姓名" prop="contact">
                <el-input v-model.trim="model.contact" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="发货SKU" prop="sku">
                <el-input type="textarea" :rows="6" v-model="model.sku" placeholder="输入多个SKU时，每个SKU占一行（按Enter换行）" clearable />
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
                <el-input v-model.trim="model.mobile" placeholder="请输入电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
                <el-input v-model.trim="model.address" placeholder="请输入详细地址" clearable></el-input>
            </el-form-item>
            <el-form-item label="省份" prop="city">
                <el-input v-model.trim="model.city" placeholder="请输入省份" clearable></el-input>
            </el-form-item>
            <el-form-item label="市区" prop="district">
                <el-input v-model.trim="model.district" placeholder="请输入市区" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮编" prop="zip">
                <el-input v-model.trim="model.zip" placeholder="请输入邮编" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model.trim="model.email" placeholder="请输入邮箱" clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getShopList } from '@/api/shop'
import { AutoshippingEdit,AutoshippingInfo} from '@/api/order'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            dict: {
                shopList: [],
            },
            shopList: [
                { shop_id: 'LilyLove TTS小店', shop_name: "LilyLove TTS小店" },
                { shop_id: 'SheCurve独立站', shop_name: "SheCurve独立站" },
                { shop_id: 'LilyLove独立站', shop_name: "LilyLove独立站" },
            ],
            type_arr: [
                { label: '海拍发货', value: "3" },
                { label: 'KOL发货', value: "2" },
                { label: 'TK发货', value: "1" },
                { label: 'Billo', value: "4" },
            ],
            loading: false,
            save: false,
            model: {
                type: '2',
            },
            rules: {
            },
        }
    },
    computed: {
        title() {
            return `${this.model.id ? '编辑' : '录入'}订单`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        try {
            const [shopData] = await Promise.all([getShopList()])
            this.dict.shopList = shopData?.data?.list ?? []
        } catch (error) {
            this.loading = false
            console.log(error)
        }
        // this.getDetail()
    },
    methods: {
        getDetail() {
            this.loading = true
            const params = { id: this.params.id }
            AutoshippingInfo(params)
                .then(res => {
                    this.model = Object.assign({}, this.model, res.data)
                })
                .finally(() => {
                    this.loading = false
                })
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                const params = { ...this.model }
                if (this.save) {
                    return
                }
                this.save = true
                AutoshippingEdit(params)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                        this.save = false
                    })
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.form-class.el-form .el-form-item {
    width: 100%;
    margin-right: 0;
}
.form-class.el-form .el-form-item .el-input {
    width: 400px;
}
</style>
